<!-- Shry -->
<title>角色管理</title>

<!-- ajax layout which only needs content area -->
<div class="page-header">
    <h1>
        角色管理
    </h1>
</div><!-- /.page-header -->

<div class="row" data-ng-controller="pageContentController" data-ng-cloak>
    <div class="col-xs-12">
        <!-- PAGE CONTENT BEGINS -->
        <!-- 结果表格 -->
        <div data-ng-controller="resultTableController" data-ng-show="resultTableData">
            <div class="col-xs-12 col-sm-6 col-md-5 col-lg-4" style="padding: 0px">
                <div class="input-group">
                        <span id="searchInResultToggle" class="input-group-addon"><i
                                class="ace-icon fa fa-search"></i></span>
                    <input id="searchInResult" type="text" class="form-control" placeholder="在结果中搜索"
                           data-ng-model="searchInResult"/> <!-- TODO style -->
                </div>
            </div>
            <table id="resultTable" class="table table-striped table-bordered table-hover">
                <thead>
                <tr>

                    <th data-ng-repeat="(reference, displayName) in resultTableData.tableHead">{{displayName}}
                    </th>
                    <th>
                        配置菜单权限
                    </th>
                    <!-- 新建功能 -->
                    <th>
                        <button class="btn btn-xs btn-success"
                                data-ng-click="createModal('add','')">
                            <i class="ace-icon fa fa-plus bigger-120"></i>
                        </button>
                    </th>
                    <!-- ／新建功能 -->
                </tr>
                </thead>

                <tbody>
                <tr data-ng-repeat="row in resultTableData.tableRow | filter: searchInResult"
                    data-row-id="{{row[resultTableData.identity]}}">
                    <td data-ng-repeat="(key,value) in row">
                        {{value}}
                    </td>
                    <td>
                        <button class="btn btn-xs btn-success"
                                data-ng-click="createModal('menu',row[resultTableData.identity])">
                            <i class="ace-icon fa fa-cog bigger-120"></i>
                        </button>
                    </td>
                    <td>
                        <div class="hidden-sm hidden-xs btn-group">
                            <button class="btn btn-xs btn-success"
                                    data-ng-click="createModal('view',row[resultTableData.identity])">
                                <i class="ace-icon fa fa-search-plus bigger-120"></i>
                            </button>

                            <button class="btn btn-xs btn-info"
                                    data-ng-click="createModal('edit',row[resultTableData.identity])">
                                <i class="ace-icon fa fa-pencil bigger-120"></i>
                            </button>

                            <button class="btn btn-xs btn-danger"
                                    data-ng-click="createModal('del',row[resultTableData.identity])">
                                <i class="ace-icon fa fa-trash-o bigger-120"></i>
                            </button>

                        </div>

                        <div class="hidden-md hidden-lg">
                            <div class="inline pos-rel">
                                <button class="btn btn-minier btn-primary dropdown-toggle"
                                        data-toggle="dropdown"
                                        data-position="auto">
                                    <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                                </button>

                                <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                    <li>
                                        <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
													<span class="green"
                                                          data-ng-click="createModal('view',row[resultTableData.identity])">
														<i class="ace-icon fa fa-search-plus bigger-120"></i>
													</span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
													<span class="blue"
                                                          data-ng-click="createModal('edit',row[resultTableData.identity])">
														<i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
													</span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
													<span class="red"
                                                          data-ng-click="createModal('del',row[resultTableData.identity])">
														<i class="ace-icon fa fa-trash-o bigger-120"></i>
													</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </td>
                </tr>

                </tbody>
            </table>

            <div class="col-xs-12 col-sm-8 col-sm-push-2 col-md-6 col-md-push-3 col-lg-4 col-lg-push-4 center"
                 style="padding: 0px" data-ng-show="!(resultTableData.totalPageNumber == '1')">
                <ul class="pagination" style="margin: 0px">
                    <li data-ng-repeat=" number in resultTableData.pageNumberArray"
                        data-ng-class="{'active' : number == resultTableData.pageNumber}"><a
                            data-ng-click="getResultByPage(number)">{{number}}</a></li>
                    <li class="disabled"><a>总记录：{{resultTableData.totalRowNumber}} 条</a></li>
                </ul>
            </div>

        </div>
        <!-- /结果表格 -->
        <!-- Modal -->

        <div class="modal fade" id="modal" tabindex="-1" role="dialog" data-ng-controller="modalController">
            <div class="modal-dialog" role="document">


                <!-- view modal -->
                <div class="modal-content" data-ng-show="modal.modalType == 'view'">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">查看角色详细信息</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">

                            <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1">
                                <div class="space space-4"></div>
                                <label>角色ID</label>
                                <input name="role_id" type="text"
                                       class="form-control" data-ng-model="modal.modelData.role_id" readonly/>

                                <div class="space space-4"></div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1">
                                <div class="space space-4"></div>
                                <label>角色名称</label>
                                <input name="role_name" type="text"
                                       class="form-control" data-ng-model="modal.modelData.role_name" readonly/>

                                <div class="space space-4"></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">

                        <input type="button" class="btn btn-default" data-dismiss="modal" value="关闭">
                    </div>
                </div>
                <!-- /view modal -->

                <!-- edit modal -->
                <div class="modal-content" data-ng-show="modal.modalType == 'edit'">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">修改这个角色</h4>
                    </div>
                    <form name="editModalForm" novalidate>
                        <div class="modal-body">
                            <div class="row">

                                <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1">
                                    <div class="space space-4"></div>
                                    <label>角色ID</label>
                                    <input name="role_id" type="text"
                                           class="form-control" data-ng-model="modal.modelData.role_id" readonly/>

                                    <div class="space space-4"></div>
                                </div>
                                <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1"
                                     data-ng-class="{'has-error' : editModalForm.role_name.$invalid && editFormShowInvalidInfo }">
                                    <div class="space space-4"></div>
                                    <label>角色名称</label>
                                    <input name="role_name" type="text"
                                           class="form-control" data-ng-model="modal.modelData.role_name" required/>

                                    <p data-ng-show="editModalForm.role_name.$invalid && editFormShowInvalidInfo"
                                       class="help-block"><i class="ace-icon fa fa-angle-up"></i>
                                        <small>角色名称未填写</small>
                                    </p>
                                    <div class="space space-4"></div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="space space-4"></div>
                                    <div class="alert alert-danger" role="alert"
                                         data-ng-if="editFormShowResult">
                                        <h4>提交的修改：</h4>

                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div data-ng-repeat="(k,v) in modal.modelData">
                                                    <div data-ng-if=" modalOriginal.modelData[k]!=modal.modelData[k] ">
                                                        <p>{{k}}: {{modalOriginal.modelData[k]}} >> {{v}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <input type="button" class="btn btn-primary"
                                   data-ng-click="submitEditModal(editModalForm.$valid)" value="确认">

                            <input type="button" class="btn btn-default" data-dismiss="modal" value="关闭">
                        </div>
                    </form>
                </div>
                <!-- /edit modal -->
                <!-- add modal -->
                <div class="modal-content" data-ng-show="modal.modalType == 'add'">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">添加一个新的角色</h4>
                    </div>
                    <form name="addModalForm" novalidate>
                        <div class="modal-body">
                            <div class="row">

                                <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1">
                                    <div class="space space-4"></div>
                                    <label>角色ID</label>
                                    <input name="role_id" type="text"
                                           class="form-control" value="自动生成" readonly/>

                                    <div class="space space-4"></div>
                                </div>
                                <div class="col-xs-12 col-sm-6 col-md-5 col-md-push-1"
                                     data-ng-class="{'has-error' : addModalForm.role_name.$invalid && addFormShowInvalidInfo }">
                                    <div class="space space-4"></div>
                                    <label>角色名称</label>
                                    <input name="role_name" type="text"
                                           class="form-control" data-ng-model="modal.modelData.role_name" required/>

                                    <p data-ng-show="addModalForm.role_name.$invalid && addFormShowInvalidInfo"
                                       class="help-block"><i class="ace-icon fa fa-angle-up"></i>
                                        <small>角色名称未填写</small>
                                    </p>
                                    <div class="space space-4"></div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="space space-4"></div>
                                    <div class="alert alert-danger" role="alert"
                                         data-ng-if="addFormShowResult">
                                        <h4>提交的修改：</h4>

                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div data-ng-repeat="(k,v) in modal.modelData">
                                                    <div data-ng-if=" modalOriginal.modelData[k]!=modal.modelData[k] ">
                                                        <p>{{k}}: {{modalOriginal.modelData[k]}} >> {{v}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <input type="button" class="btn btn-primary"
                                   data-ng-click="submitAddModal(addModalForm.$valid)" value="确认">

                            <input type="button" class="btn btn-default" data-dismiss="modal" value="关闭">
                        </div>
                    </form>
                </div>
                <!-- /add modal -->
                <!-- del modal -->
                <div class="modal-content" data-ng-show="modal.modalType == 'del'">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">删除这个角色</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="alert alert-danger" role="alert">
                                    <div class="row" data-ng-repeat="(k,v) in modal.modelData">
                                        <div class="col-xs-12">
                                            {{k}} : {{v}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="button" class="btn btn-primary"
                               data-ng-click="submitDelModal()" value="确认">

                        <input type="button" class="btn btn-default" data-dismiss="modal" value="关闭">
                    </div>
                </div>
                <!-- /del modal -->
                <!-- special modals -->
                <!-- menu config modal-->
                <div class="modal-content" data-ng-show="modal.modalType == 'menu'">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">配置角色菜单权限</h4>
                    </div>
                    <div class="modal-body">
                        <div class="col-xs-12" style="padding: 0">
                            <div class="input-group">
                            <span id="searchInResultToggle2" class="input-group-addon"><i
                                    class="ace-icon fa fa-search"></i></span>
                                <input id="searchInResult2" type="text" class="form-control" placeholder="在结果中搜索"
                                       data-ng-model="searchInResult"/> <!-- TODO style -->
                            </div>
                        </div>
                        <table id="menuSelectTable" class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th data-ng-repeat="(reference, displayName) in modal.modelRange.tableHead">
                                    {{displayName}}
                                </th>
                            </tr>
                            </thead>

                            <tbody>
                            <tr data-ng-repeat="row in modal.modelRange.tableRow | filter: searchInResult"
                                data-row-id="{{row[modal.modelRange.identity]}}">


                                <td class="center">
                                    <label class="pos-rel">
                                        <input type="checkbox" class="ace ace-switch ace-switch-6"
                                               data-ng-model="modal.modelData.selectedRow[row[modal.modelRange.identity]]"/>
                                        <span class="lbl"></span>
                                    </label>
                                </td>

                                <td data-ng-repeat="(key,value) in row ">
                                    {{value}}
                                </td>

                            </tr>

                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">

                        <input type="button" class="btn btn-primary"
                               data-ng-click="submitMenuModal()" value="确认">

                        <input type="button" class="btn btn-default" data-dismiss="modal" value="关闭">

                    </div>
                </div>

                <!-- /menu config modal-->
                <!-- /special modals -->

            </div>
        </div>


        <!-- /Modal -->
        <!-- PAGE CONTENT ENDS -->
    </div>
    <!-- /.col -->
</div><!-- /.row -->

<!-- page specific plugin scripts -->
<script type="text/javascript">

    var scripts = [null, "lib/assets/js/date-time/bootstrap-datepicker.js", "lib/assets/js/date-time/moment.js", "lib/assets/js/date-time/daterangepicker.js", "lib/assets/js/jquery.knob.js", "lib/assets/js/jquery.autosize.js", null]
    $('.page-content-area').ace_ajax('loadScripts', scripts, function () {
        //inline scripts related to this page
        jQuery(function ($) {
        });


        //AngularJS
        var app = angular.module('contentApp');
        var servletLocation = "servlet/RoleServlet";
        var messageHandler = function (data) {
            if (data["returnMessage"] != null && data["returnMessage"] != undefined) {
                if (data["returnMessage"].messageType == 'error') {
                    data["returnMessage"].messageType = 'danger';
                }
                $.bootstrapGrowl(data.returnMessage.message, {
                    type: data.returnMessage.messageType, // (null, 'info', 'error', 'success')
                    offset: {from: 'top', amount: 50}, // 'top', or 'bottom'
                    align: 'right', // ('left', 'right', or 'center')
                    width: 250, // (integer, or 'auto')
                    delay: function (type) {
                        if (type == 'error') {
                            return 7000;
                        } else {
                            return 3000;
                        }
                    }(data.returnMessage.messageType),
                    allow_dismiss: true,
                    stackup_spacing: 10 // spacing between consecutively stacked growls.
                });
            }
            return data;
        };
        //页面控制器
        app.controller("pageContentController", function ($scope) {

            $scope.$on("CreateModalTOParent", function (event, msg) {
                $scope.$broadcast("CreateModal", msg);
            });
            $scope.$on("TableResultByPageTOParent", function (event, msg) {
                $scope.$broadcast("TableResultByPage", msg);
            });
        });


        //结果表格控制器
        app.controller("resultTableController", function ($scope, $http) {
            $scope.$on("TableResultByPage", function (event, msg) {
                $scope.getResultByPage(msg);
            });


            //载入表格结果
            $scope.getResultByPage = function (page) {
                var sendData = {
                    'service': 'getAllRoles',
                    'pageNum': page
                };
                $http.post(servletLocation, sendData).success(function (response) {
                    //获取到结果列表
                    var pageNumberArray = [];
                    for (var i = 1; i <= response.totalPageNumber; i++) {
                        pageNumberArray.push(i.toString());
                    }
                    $scope.resultTableData = messageHandler(response);
                    $scope.resultTableData["pageNumberArray"] = pageNumberArray;
                });
            };

            $scope.getResultByPage('1');

            $scope.createModal = function (view, modelDataId) {
                if (view == "add") {
                    var message = {};
                    message["modalType"] = view;
                    message["currentPage"] = $scope.resultTableData.pageNumber;
                    $scope.$emit("CreateModalTOParent", message);
                    return;
                }
                if (view == "menu") {
                    var sendData = {};
                    sendData["service"] = "showMenus"; //TODO
                    sendData["role_id"] = modelDataId;

                    $http.post(servletLocation, sendData).success(function (response) {
                        //获取到结果列表
                        response.modelData["role_id"] = modelDataId;
                        response["modalType"] = view;
                        response["currentPage"] = $scope.resultTableData.pageNumber;
                        //将更新事件冒泡到父控制器
                        $scope.$emit("CreateModalTOParent", messageHandler(response));
                    });
                    return;
                }

                var sendData = {};
                sendData["service"] = "detailRole";
                sendData["role_id"] = modelDataId;

                $http.post(servletLocation, sendData).success(function (response) {
                    //获取到结果列表

                    response["modalType"] = view;
                    response["currentPage"] = $scope.resultTableData.pageNumber;
                    //将更新事件冒泡到父控制器
                    $scope.$emit("CreateModalTOParent", messageHandler(response));
                });
            }

        });
        //Modal控制器
        app.controller("modalController", function ($scope, $http) {
            $scope.$on("CreateModal", function (event, msg) {

                $scope.modal = msg;
                $scope.modalOriginal = jQuery.extend(true, {}, msg);
                $scope.editFormShowInvalidInfo = false;
                $scope.editFormShowResult = false;
                $scope.addFormShowInvalidInfo = false;
                $scope.addFormShowResult = false;
                $scope.menuFormShowInvalidInfo = false;
                $scope.menuFormShowResult = false;
                $("#modal").modal('toggle');
            });

            $scope.submitEditModal = function (valid) {
                if (valid && $scope.editFormShowInvalidInfo) {
                    var sendData = {};
                    sendData["service"] = "modifyRole";
                    sendData["role_id"] = $scope.modalOriginal.modelData.role_id;
                    sendData["role_name"] = $scope.modal.modelData.role_name;

                    console.log(sendData);
                    $http.post(servletLocation, sendData).success(function (response) {  //TODO Modify the api & post info here
                        messageHandler(response);
                        if (response.returnMessage.messageType == "success") {
                            console.log("boboboo!")
                            console.log($scope.modal.currentPage);
                            $scope.$emit("TableResultByPageTOParent", $scope.modal.currentPage);
                            $("#modal").modal('toggle');
                        }
                    });
                }
                if (valid) {
                    $scope.editFormShowResult = true;
                }
                $scope.editFormShowInvalidInfo = true;
            };

            $scope.submitDelModal = function () {

                var sendData = {};
                sendData["service"] = "delRole";
                sendData["role_id"] = $scope.modalOriginal.modelData.role_id;
                $http.post(servletLocation, sendData).success(function (response) {
                    messageHandler(response);
                    if (response.returnMessage.messageType == "success") {
                        $scope.$emit("TableResultByPageTOParent", $scope.modal.currentPage);
                        $("#modal").modal('toggle');
                    }
                });

            };
            $scope.submitAddModal = function (valid) {
                if (valid && $scope.addFormShowInvalidInfo) {
                    var sendData = {};
                    sendData["service"] = "addRole";
                    sendData["role_name"] = $scope.modal.modelData.role_name;
                    $http.post(servletLocation, sendData).success(function (response) {  //TODO Modify the api & post info here

                        messageHandler(response);
                        if (response.returnMessage.messageType == "success") {
                            $scope.$emit("TableResultByPageTOParent", $scope.modal.currentPage);
                            $("#modal").modal('toggle');
                        }
                    });
                }
                if (valid) {
                    $scope.addFormShowResult = true;
                }
                $scope.addFormShowInvalidInfo = true;
            };

            $scope.submitMenuModal = function () {

                var sendData = {};
                sendData["service"] = "setMenuToRole";
                sendData["role_id"] = $scope.modal.modelData.role_id;
                sendData["list"] = [];

                for (var key in $scope.modal.modelData.selectedRow) {
                    if ($scope.modal.modelData.selectedRow[key] == true) {
                        sendData["list"].push(Number(key));
                    }
                }
                // array in angularjs... f@cking servlet
                $.ajax(
                        {
                            type: "post",
                            url: servletLocation,
                            data: sendData,
                            success: function (response) {
                                response = eval('(' + response + ')');
                                messageHandler(response);
                                if (response.returnMessage.messageType == "success") {
                                    $("#modal").modal('toggle');
                                }
                            }
                        }
                );

//                    $http.post(servletLocation, sendData).success(function (response) {
//
//                        messageHandler(response);
//                        if (response.returnMessage.messageType == "success") {
//                            $("#modal").modal('toggle');
//                        }
//                    });
//
//
//                    $scope.menuFormShowResult = true;
//
//                $scope.menuFormShowInvalidInfo = true;
            };
        });

    });

</script>